<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue的资源 -->
		<script src="js/vue.js"></script>
		<!-- 引入element的相关资源 -->
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- 引入网络传输库axios的js文件 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 引入qs（进行参数处理问题）js库 -->
		<script src="js/qs.min.js"></script>
		<style>
			#app {
				width: 600px;
				height: 400px;
				/* border: 1px solid red; */
				position: absolute;
				left: 410px;
				top: 100px;
				box-shadow: 6px 6px 12px grey;
				border-radius: 12px;
				background-color: #ffffff;
				opacity: 0.8;
			}

			#main {
				margin-top: 100px;
			}

			body {
				background-color: #F5FFFA;
			}

			#left,
			#right {
				position: absolute;
				width: 400px;
				height: 400px;
				left: 1010px;
				z-index: 9;
				top: 10px;

			}

			#right {
				left: 10px;
			}

			img {
				width: 400px;
				height: 700px;
				opacity: 0.8;
			}
		</style>
	</head>
	<body>
		<div id="left">
			<img src="img/studing.jpg" />
		</div>
		<div id="right">
			<img src="img/styding2.jpeg" />
		</div>
		<div id="app">
			<div id="main">
				<el-form :model="loginBean" :rules="rules" status-icon ref="ruleForm" label-width="100px"
					class="demo-ruleForm">
					<el-row>
						<el-col :span="20">
							<el-form-item label="" prop="username">
								<el-input placeholder="请输入用户名" prefix-icon="el-icon-user-solid" type="text"
									v-model="loginBean.username" autocomplete="off"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="20">
							<el-form-item label="" prop="userpwd">
								<el-input placeholder="请输入密码" prefix-icon="el-icon-s-goods" type="password"
									v-model="loginBean.userpwd" autocomplete="off"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<div style="color: red;margin-left: 100px;" v-show="isShow">用户名密码错误，请重新输入</div>
					<el-form-item>
						<el-button type="primary" @click="login()">登录</el-button>

					</el-form-item>
				</el-form>
			</div>


		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					loginBean: {
						username: "",
						userpwd: ""
					},
					isShow: false,
					rules: {
						username: [ { required: true, message: '请输入用户名', trigger: 'blur' }],
						userpwd: [ { required: true, message: '请输入密码', trigger: 'blur' }]
					}
				},
				methods: {
					login: function() {
						console.log(this.loginBean)
						console.log(Qs.stringify(this.loginBean))
						// 进行参数序列化处理
						var params = Qs.stringify(this.loginBean)
						var that = this
						axios.post("http://localhost:8086/qst_springbootvue20220217/logined", params).
						then(function(response) {
							// 获取响应结果
							console.log(response.data)
							if (response.data == "ok") {
								window.localStorage.setItem("username",that.loginBean.username)
								window.location.href = "pages/welcome.html"
							} else {
								that.loginBean = {}
								that.isShow = true
							}


						}).
						catch(function(err) {})
					}

				}
			})
		</script>
	</body>
</html>
